import io from 'socket.io-client'
import store from '@/store'
import { MessageBox, Notification } from 'element-ui'

// 创建连接
const socket = io()
// 建立监听
socket.on('connect', () => {
  console.log('服务器已经建立连接')
  store.commit('updateConnected', true)
})
socket.on('disconnect', () => {
  store.commit('updateConnected', false)
})
// 处理room_info事件，拿到信息，存vuex
socket.on('room_info', ({ nicknames, holder, lines }) => {
  store.commit('updateNicknames', nicknames)
  store.commit('updateHolder', holder)
  store.commit('updateLines', lines)
})
// 处理user_enter事件，更新nicknames列表
socket.on('user_enter', nickname => {
  store.commit('addToNicknames', nickname)
})
// 监听游戏的开始
socket.on('game_started', holder => {
  store.commit('updateHolder', holder)
  Notification.success(`${holder}作为主持人，已经成功开始了游戏，大家可以开始猜答案啦！`)
})
socket.on('already_started', holder => {
  store.commit('updateHolder', holder)
  Notification.alert(`当前游戏已经进行中啦，主持人是${holder}`)
})
// 监听游戏的终止，重置消息
socket.on('game_stoped', () => {
  store.commit('updateHolder', '')
  store.commit('updateLines', [])
  Notification.warning('主持人已经终止了当前的游戏')
})
// 监听线的开始绘制
socket.on('starting_line', line => {
  store.commit('drawNewLine', line)
})
// 监听线的持续绘制
socket.on('updating_line', line => {
  store.commit('updateNewLine', line)
})
// 监听猜答案的结果
socket.on('game_answered', ({ alreadyDone, success, nickname, answer }) => {
  // 处理已经答对的情况
  if (alreadyDone) {
    MessageBox.alert('当前答案已经被人猜中了，您不能再猜了')
    return
  }
  // 处理没答对的情况
  if (!success) {
    Notification.error(`玩家${nickname}猜的答案不对！${answer}`)
    return
  }
  MessageBox.alert(`玩家${nickname}猜中了正确的答案：${answer}`)
})
socket.on('user_leave', nickname => {
  // 将离开的人，从vuex nicknames中移除该项
  store.commit('delFromNicknames', nickname)

  // 主持人退出，做提示，并清空信息
  if (nickname === store.state.holder) {
    store.commit('updateHolder', '')
    store.commit('updateLines', [])
    Notification.error('主持人离开了游戏！')
  }
})

export default socket
